 <template>
 	<div class="star" :class="starType">
 		<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
 	</div>
 </template>

<script type="text/javascript">
const LENGTH = 5
const CLS_ON = 'on'
const CLS_HALF = 'half'
const CLS_OFF = 'off'

export default {
	props: ['size', 'score'],
	computed: {  // 计算属性
		starType(){
			return "star-" + this.size
		},
		itemClasses(){
			let result = []
			let score = Math.floor(this.score * 2) / 2
			let hasDecimal = score % 1 !== 0
			let integer = Math.floor(score)
			for(let i = 0 ; i < integer ; i++ ){
				result.push(CLS_ON)
			}
			if(hasDecimal){
				result.push(CLS_HALF)
			}
			while(result.length < LENGTH){
				result.push(CLS_OFF)
			}
			return result
		}
	}
}

</script>

<style lang="stylus" rel="stylesheet/stylus">
border-1px($color)
  position: relative
  &:after
    content: ''
    position: absolute
    bottom: 0
    left: 0
    display: block
    width: 100%
    border-top: 1px solid $color

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")
.clearfix
    display: inline-block
    &:after
        display: block
        content: '.'
        height: 0
        line-height: 0
        clear: both
        visibility: hidden
.star
	font-size 0
	.star-item
		display inline-block
		background-repeat no-repeat
	&.star-48
		.star-item
			width 20px
			height 20px
			margin-right 22px
			background-size 20px 20px
			&:last-child
				margin-right 0
			&.on
				bg-image('star48_on')
			&.half
				bg-image('star48_half')
			&.off
				bg-image('star48_off')
	&.star-36
		.star-item
			width 15px
			height 15px
			margin-right 16px
			background-size 15px 15px
			&:last-child
				margin-right 0
			&.on
				bg-image('star36_on')
			&.half
				bg-image('star36_half')
			&.off
				bg-image('star36_off')
	&.star-24
		.star-item
			width 10px
			height 10px
			margin-right 3px
			background-size 10px 10px
			&:last-child
				margin-right 0
			&.on
				bg-image('star24_on')
			&.half
				bg-image('star24_half')
			&.off
				bg-image('star24_off')
		
</style>